<template>
	<div class="wrapper record">
		<head-title :title="headText" @callback="onClickLeft"></head-title>
		<div class="e-record wrapbd">
			<ul class="ordernav" id="orderDiv">
				<li v-if="status=='a'" class="active" @click="tabClick('a')">全部</li>
        <li v-if="status!='a'" @click="tabClick('a')">全部</li>
        <li v-if="status==0" class="active" @click="tabClick(0)">待付款</li>
        <li v-if="status!=0" @click="tabClick(0)">待付款</li>
        <li v-if="status==1" class="active" @click="tabClick(1)">待发货</li>
        <li v-if="status!=1" @click="tabClick(1)">待发货</li>
        <li v-if="status==2" class="active" @click="tabClick(2)">待收货</li>
        <li v-if="status!=2" @click="tabClick(2)">待收货</li>
        <li v-if="status==3" class="active" @click="tabClick(3)">已完成</li>
        <li v-if="status!=3" @click="tabClick(3)">已完成</li>
        <li v-if="status==7" class="active" @click="tabClick(7)">退款</li>
        <li v-if="status!=7" @click="tabClick(7)">退款</li>
			</ul>
			<ul class="recordlist">
				<router-link :to="{path:'orderDetails',query:{id:item.order_no}}" tag="li" v-for="(item,index) in listAll" :key="index">
					<div class="ordTit"><h4 class="left">订单号：{{item.order_no}}</h4><i class="fa fa-angle-right fa-lg right iconfont" aria-hidden="true"></i><h4 class="right" style="margin-right: .2rem;color: #b7b7b7">{{item.status_text}}</h4></div>
					<ul class="proNav">
						<router-link :to="{path:'mallDetails',query:{spec_id:pitem.spec_id}}" tag="li" v-for="(pitem,index) in item.product_list" :key="index"><img :src="pitem.cover_img"></router-link>
					</ul>
          <div class="ordTit">
            <h5 class="right">共<i class="font-c">{{item.buy_num_total}}</i>件商品 金额：<i class="font-c">￥{{item.total_money}}</i>
            <van-button v-if="item.status==0" class="pay-btn" size="mini" type="danger">支付订单</van-button></h5>
          </div>
				</router-link>
				<p v-if="page != pageNum && listAll.length != 0" @click="onLoad()">加载更多</p>
				<p v-if="page == pageNum || listAll.length == 0">没有更多数据</p>
			</ul>
		</div>
	</div>
</template>
<script>
	import HeadTitle from "./../../components/title.vue";
  import { Button } from 'vant';
	export default {
		data(){
			return {
				headText: '我的订单',  //顶部标题
				listAll:[],
        pageSize:'',  //有多少条数据
        pageNum:'',  //总页数
        page:1,  //页数
        status:this.$route.query.status
			}
		},
		mounted(){
            var orderDiv = document.getElementById("orderDiv");
			var orderLi=orderDiv.getElementsByTagName('li');
			this.Tools.tabSwitch({li:orderLi});
            this.initialize(this.status);  //获取消费记录列表
		},
		methods:{
			//左上角返回键
			onClickLeft () { this.$router.push({path:'user'});},
      // onClickLeft () { this.$router.go(-1);},
			//获取订单列表
			initialize(id){
				var _this = this;
				this.Tools.AXIOS({
          url: 'order/list',
					transformRequest:{
						status: id=='a'?'':id,
						page: this.page || 1,
					},
          success: function (res) {
						let result = res.data.data
            _this.pageSize = result.pageSize;
            _this.pageNum = result.pageNum;
						_this.listAll.push(...result.list);
          }
        })
			},
			tabClick(id){
				this.listAll = [];this.page = 1;
				switch(id){
          case 'a':this.initialize();break;
				  case 0:this.initialize(0);break;
          case 1:this.initialize(1);break;
          case 2:this.initialize(2);break;
          case 3:this.initialize(3);break;
          case 7:this.initialize(7);break;
				}
			},
      //分页加载
      onLoad() {
          if(this.page < this.pageNum){
              this.page++;
              this.initialize();
          }
      },
		},
		components: {
			HeadTitle,
      [Button.name]:Button
		},
	}
</script>
<style scoped>
	.e-record{ overflow: hidden; }
	.ordernav{ display: flex; background: #fff; display: -webkit-flex; flex-direction: row; justify-content: space-around; width: 100%; overflow: hidden; padding: .3rem 0; border-bottom: 1px solid #EDEDED;}
	.ordernav li{ padding-bottom: .2rem; font-size: .35rem; margin: 0 1%; }
	.ordernav li.active{ border-bottom: 2px solid #D94141; }
	.recordlist{ background: #fff;}
	.recordlist li{ width: 100%; overflow: hidden; border-bottom: 8px solid #E8E8E8;}
	.recordlist li:nth-last-of-type(1){ border-bottom: 1px solid #E8E8E8;}
	.recordlist li .ordTit{ width: 95%; overflow: hidden; margin: 0 auto;}
	.recordlist li .ordTit h4,.recordlist li .ordTit h5{font-weight: normal; padding: .2rem 0;}.recordlist li .ordTit h5{ margin-right: .5rem;}
	.recordlist li .ordTit i{ margin-top: .25rem;}
	.recordlist li .proNav { overflow: hidden; border-bottom: 1px solid #EDEDED; border-top: 1px solid #EDEDED;}
	.recordlist li .proNav li{ width: 20%; height: 1.3rem; float: left; margin-left: .2rem; border: 0;  padding: .2rem 0; overflow: hidden;}
	.recordlist li .proNav li img{ width: 100%;}
	.recordlist p{ color: #ccc; padding: .35rem 0; text-align: center;}
  .font-c{color: #FD9709; font-style: normal;}
  .pay-btn{margin-left: .2rem;}
</style>
